<template>
  <div>
    <!-- views/Direct.vue -->
    <h1>测试自定义指令</h1>
    <p v-red>小米汽车还没影子，智能手机基本盘快撑不住了。</p>
    <p v-color="`#33f03d`">小米汽车还没影子，智能手机基本盘快撑不住了。</p>


    <h1>测试常用指令</h1>
    <h3 v-red>电影评论</h3>
    <p>{{comment}}</p>
    <p v-text="comment"></p>
    <p v-html="comment"></p>
    <p>{{comment}}</p>
    <p v-pre>{{comment}}</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            comment: "这个电影好看呀！<b>吐血推荐！</b>"
        }
    },
    directives: {  // 定义当前组件可以使用的自定义指令
      red(el){  // 该指令通过：v-red来调用 执行指令方法时传入当前DOM对象
        el.style.color = 'red'   
      },
      // v-color="`#33f03d`"指令执行时将会传入当前dom对象与参数#33f03d
      color(el, param){ 
        console.log(param)
        el.style.color = param.value  
      }
    }
};
</script>

<style lang="scss" scoped></style>
